<template>
    <div>
        <div class="chatContainer">
            <div>
                <div class="chatBtn" @click="chatBtn">
                    <img src="../../images/kefus.png" alt="">
                </div>

            </div>
            <div class="chatBox" ref="chatBox">
                <div class="chatBox-head">
                    <div class="chatBox-head-one">
                         客服会话
                        <div class="chat-close" style="margin: 0px 10px 0 0;font-size: 14px">关闭</div>
                    </div>
                    <div class="chatBox-head-two">
                        <div class="chat-return">返回</div>
                        <div class="chat-people">
                            <div class="ChatInfoHead">
                                <!--<img src="http://www.17sucai.com/preview/776298/2018-01-17/jqueryChat/index.html" alt="头像">-->
                            </div>
                            <div class="ChatInfoName">这是用户的名字，看看名字到底能有多长</div>
                        </div>
                        <div class="chat-close">关闭</div>
                    </div>
                </div>
                <div class="chatBox-info" style="height: 495px;">
                    <div class="chatBox-list" ref="chatBoxlist" style="height: 495px;">
                        <div class="chat-list-people">
                            <div><img src="../../images/icon01.png" alt="头像"></div>
                            <div class="chat-name">
                                <p>自酌一杯酒</p>
                            </div>
                            <div class="message-num">10</div>
                        </div>
                    </div>
                    <div class="chatBox-kuang" ref="chatBoxkuang" style="height: 495px;">
                        <div class="chatBox-content" style="height: 448px;">
                            <div class="chatBox-content-demo" id="chatBox-content-demo" style="height: 448px;">

                                <!--<template  v-for="arr_num1 in timeline">-->

                                    <!--<div class="clearfloat">-->
                                        <!--<p>我的名字</p>-->
                                        <!--<div class="right" style="width: 100%"> <div class="chat-message"  v-html="arr_num1.msg">{{arr_num1.msg}}</div>-->
                                            <!--<div class="chat-avatars">-->
                                                <!--<img src="../../images/icon02.png" alt="头像" />-->
                                            <!--</div>-->

                                        <!--</div>-->
                                    <!--</div>-->

                                    <!--<div class="clearfloat" >-->
                                        <!--<div class="author-name">-->
                                            <!--<small class="chat-date">{{arr_num1.created_at}}</small>-->
                                        <!--</div>-->
                                        <!--<p class="anminName">用户名</p>-->
                                        <!--<div class="left">-->
                                            <!--<div class="chat-avatars"><img src="/static/img/icon01.11274d8.png" alt="头像"></div>-->
                                            <!--<div class="chat-message" v-html="arr_num1.msg">-->
                                                <!--{{arr_num1.msg}}-->
                                            <!--</div>-->
                                        <!--</div>-->
                                    <!--</div>-->
                                <!--</template>-->





                            </div>
                        </div>
                        <div class="chatBox-send">
                          <div>
                              <button id="chat-biaoqing" class="btn-default-styles">
                                  <img src="../../images/qq.png" alt="">
                              </button>

                              <label id="chat-tuxiang" title="发送图片" class="btn-default-styles">
                                  <input type="file"  @change="selectImg"  ref="panel" accept="image/jpg,image/jpeg,image/png" name="file" class="hidden">
                                  <img src="../../images/imgsrc.png" alt="">
                              </label>
                          </div>
                            <div class="spend">
                                <textarea type="text"  class="div-textarea" contenteditable="true" style="width: 260px;" v-model="lessw"/>
                                <button id="chat-fasong" class="btn-default-styles" :data-ld="lessw" @click="fasong">
                                    发送
                                </button>
                            </div>
                            <div class="biaoqing-photo" style="display: none;">
                                <ul>
                                    <li><span class="emoji-picker-image" style="background-position: -9px -18px;"></span></li>
                                    <li><span class="emoji-picker-image" style="background-position: -40px -18px;"></span></li>
                                    <li><span class="emoji-picker-image" style="background-position: -71px -18px;"></span></li>
                                    <li><span class="emoji-picker-image" style="background-position: -102px -18px;"></span></li>
                                    <li><span class="emoji-picker-image" style="background-position: -133px -18px;"></span></li>
                                    <li><span class="emoji-picker-image" style="background-position: -164px -18px;"></span></li>
                                    <li><span class="emoji-picker-image" style="background-position: -9px -52px;"></span></li>
                                    <li><span class="emoji-picker-image" style="background-position: -40px -52px;"></span></li>
                                    <li><span class="emoji-picker-image" style="background-position: -71px -52px;"></span></li>
                                    <li><span class="emoji-picker-image" style="background-position: -102px -52px;"></span></li>
                                    <li><span class="emoji-picker-image" style="background-position: -133px -52px;"></span></li>
                                    <li><span class="emoji-picker-image" style="background-position: -164px -52px;"></span></li>
                                    <li><span class="emoji-picker-image" style="background-position: -9px -86px;"></span></li>
                                    <li><span class="emoji-picker-image" style="background-position: -40px -86px;"></span></li>
                                    <li><span class="emoji-picker-image" style="background-position: -71px -86px;"></span></li>
                                    <li><span class="emoji-picker-image" style="background-position: -102px -86px;"></span></li>
                                    <li><span class="emoji-picker-image" style="background-position: -133px -86px;"></span></li>
                                    <li><span class="emoji-picker-image" style="background-position: -164px -86px;"></span></li>
                                    <li><span class="emoji-picker-image" style="background-position: -9px -120px;"></span></li>
                                    <li><span class="emoji-picker-image" style="background-position: -40px -120px;"></span></li>
                                    <li><span class="emoji-picker-image" style="background-position: -71px -120px;"></span></li>
                                    <li><span class="emoji-picker-image" style="background-position: -102px -120px;"></span>
                                    </li>
                                    <li><span class="emoji-picker-image" style="background-position: -133px -120px;"></span>
                                    </li>
                                    <li><span class="emoji-picker-image" style="background-position: -164px -120px;"></span>
                                    </li>
                                    <li><span class="emoji-picker-image" style="background-position: -9px -154px;"></span></li>
                                    <li><span class="emoji-picker-image" style="background-position: -40px -154px;"></span></li>
                                    <li><span class="emoji-picker-image" style="background-position: -71px -154px;"></span></li>
                                    <li><span class="emoji-picker-image" style="background-position: -102px -154px;"></span>
                                    </li>
                                    <li><span class="emoji-picker-image" style="background-position: -133px -154px;"></span>
                                    </li>
                                    <li><span class="emoji-picker-image" style="background-position: -164px -154px;"></span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--end ！-->
    </div>
</template>

<script>
    import api from '../../utils/api';
    import axios from 'axios'

    export default {
        name: "service",
        data:()=>({
            lessw:'',
            ws:null,
            msg: "",
            file_data:'',
            adminId:1,
            image_src:'',
            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJycWRyIiwiaWF0IjoxNTQxNzQ4NDI2LCJuYmYiOjE1NDE3NDg0MjYsImV4cCI6MTU0MjM1MzIyNiwidXNlcl9pZCI6NTQ1NTh9.lAoQyM6FR85d_S7IimtRuge8zEZ5fXC6fE0SMYeCMw8',
            hui_speak:'',
            timeline:[]
        }),
        mounted(){
            $(".chatBox").hide()
            screenFuc();
            function screenFuc() {
                var topHeight = $(".chatBox-head").innerHeight();//聊天头部高度
                //屏幕小于768px时候,布局change
                var winWidth = $(window).innerWidth();
                if (winWidth <= 768) {
                    var totalHeight = $(window).height(); //页面整体高度
                    $(".chatBox-info").css("height", totalHeight - topHeight);
                    var infoHeight = $(".chatBox-info").innerHeight();//聊天头部以下高度
                    //中间内容高度
                    $(".chatBox-content").css("height", infoHeight - 90);
                    $(".chatBox-content-demo").css("height", infoHeight - 90);
                    $(".chatBox-list").css("height", totalHeight - topHeight);
                    $(".chatBox-kuang").css("height", totalHeight - topHeight);
                    $(".div-textarea").css("width", winWidth - 80);
                } else {
                    $(".chatBox-info").css("height", 495);
                    $(".chatBox-content").css("height", 448);
                    $(".chatBox-content-demo").css("height", 448);
                    $(".chatBox-list").css("height", 495);
                    $(".chatBox-kuang").css("height", 495);
                    $(".div-textarea").css("width", 260);
                }
            }
            (window.onresize = function () {
                screenFuc();
            })();
            //未读信息数量为空时
            var totalNum = $(".chat-message-num").html();
            if (totalNum == "") {
                $(".chat-message-num").css("padding", 0);
            }
            $(".message-num").each(function () {
                var wdNum = $(this).html();
                if (wdNum == "") {
                    $(this).css("padding", 0);
                }
            });
            $(".chat-close").click(function () {
                $(".chatBox").toggle(10);
            })

            //返回列表
            $(".chat-return").click(function () {
                $(".chatBox-head-one").toggle(1);
                $(".chatBox-head-two").toggle(1);
                $(".chatBox-list").fadeToggle(1);
                $(".chatBox-kuang").fadeToggle(1);
            });
            // 发送表情
            var that =this;
            $(".emoji-picker-image").each(function () {
                $(this).click(function () {
                    var bq = $(this).parent().html();
                    var emijo = {
                        'msg':bq,
                        "id":that.adminId
                    }
                    console.log(emijo)
                    let resp =  api.request('/customer_service/send', 'post',emijo)
                    $(".chatBox-content-demo").append(
                        ` <div class="clearfloat">
                            <!--<div class="author-name">-->
                                <!--<small class="chat-date">2017-12-02 14:26:58</small>-->
                            <!--</div>-->
                            <div class="right">
                               <div class="chat-message">${bq}</div>
                               <div class="chat-avatars">
                                    <img src="" alt="头像" />
                                </div>
                            </div>
                        </div>`
                    );
                    //发送后关闭表情框
                    $(".biaoqing-photo").toggle();
                    //聊天框默认最底部
                    $(document).ready(function () {
                        $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
                    });
                })
            });
            $("#chat-biaoqing").click(function () {
                $(".biaoqing-photo").toggle();
            });
            $(document).click(function () {
                $(".biaoqing-photo").css("display", "none");
            });
            $("#chat-biaoqing").click(function (event) {
                event.stopPropagation();//阻止事件
            });
        },
        methods:{
            //打开/关闭聊天框
            chatBtn:function(){
                var that = this;
                $(".chatBox").toggle(10);
                $(".chatBox-list").hide();
                $(".chatBox-kuang").show()
             },
            //发送按钮
            fasong:function(){
                var textContent = $(".div-textarea").val().replace(/[\n\r]/g, '<br>')
                this.msg = textContent;
                this.send()
            },
            //发送信息
            send(){
                var fd = {
                    "msg":this.msg,
                    "id":this.adminId
                }
                var aa=  this.msg;
                let resp =  api.request('/customer_service/send', 'post',fd).then(res=>{
                    if (this.msg != "") {
                        $(".chatBox-content-demo").append(
                            `<div class="clearfloat">
                            <div class="author-name"><small class="chat-date">${res.data.data.created_at}<small> </div>
                               <p>我的名字</p>
                            <div class="right" style="width: 100%"> <div class="chat-message">${aa}</div>
                               <div class="chat-avatars">
                                 <img src="" alt="头像" />
                           </div>

                            </div>
                         </div> `
                        );
                        //发送后清空输入框
                        $(".div-textarea").val("");
                        //聊天框默认最底部
                        $(document).ready(function () {
                            $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
                        });
                    }
                })
            },
            //发送图片
            selectImg(pic) {
                var that =  this;
                function preview1(file) {
                    var img = new Image(), url = img.src = URL.createObjectURL(file)
                    var $img = $(img)
                    that.image_src = $img.context.src;
                    img.onload = function () {
                        URL.revokeObjectURL(url)
                    }
                }
                    var pics = that.$refs.panel.files;
                    var fileImg = that.$refs.panel;
                    var file = pic.target.files[0]
                    that.file_data = file
                    preview1(file)

                if (!pic.target.files || !pic.target.files[0]) {
                    return;
                }
                axios({
                    url: 'https://wb.renqidaren.com/api/v1/qiniu_token',
                    method: 'get',
                    headers: {
                        'Authorization': 'Bearer ' + that.token
                    },
                }).then(res => {
                    const data = res.data
                    if (data.code == 200) {
                        const token = data.data
                        // 拼装数据
                        const imgfile = new FormData()
                        imgfile.append('file', that.file_data)
                        imgfile.append('token', token)
                        // 上传到七牛
                        axios({
                            url: 'http://upload.qiniu.com',
                            method: 'post',
                            data: imgfile,
                        }).then(res => {
                            var img_url = "http://imgapp.renqidaren.com/"+res.data.key
                            var divImg =   ` <img src="${img_url}"> `
                            var fds = {
                                "msg":divImg,
                                "id":that.adminId
                            }
                            let resp =  api.request('/customer_service/send', 'post',fds).then(res=>{
                                $(".chatBox-content-demo").append(
                                    `<div class="clearfloat">
                                        <div class="author-name">
                                            <small class="chat-date">${res.data.data.created_at}</small>
                                        </div>
                                         <p>我的名字</p>
                                        <div class="right">
                                            <div class="chat-message">
                                                <img src="${img_url}">
                                            </div>
                                            <div class="chat-avatars">
                                                <img src="" alt="头像"" alt="头像" />
                                            </div>
                                            </div>
                                             </div>`
                                      );
                                    //聊天框默认最底部
                                    $(document).ready(function () {
                                        $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
                                    });
                                })
                         })
                    }
                })
            },

             WebSocket() {
                var that = this
                this.ws = new WebSocket("wss://socket.renqidaren.com:2347/")
                this.ws.onopen = function () {
                    console.log("连接成功")
                }
                this.ws.onmessage = function (ev) {
                    var item = JSON.parse(ev.data)
                    that.hui_speak = item;
                    let resp =  api.request('/customer_service/binduid', 'post', {'client_id': item.client_id})
                }
            },
        },
        created() {
            var that = this
            this.WebSocket();
            axios({
                url: 'https://wb.renqidaren.com/api/v1/customer_service/timeline',
                method: 'get',
                headers: {
                    'Authorization': 'Bearer ' + that.token
                },
                params:{
                    type:2,
                    id:that.adminId
                }
            }).then(res=>{
                console.log(res)
                // var data = [];
                // for(var i = 0,length = res.data.data.length; i < length; i++) {
                //     if(!data[res.data.data[i].from_type]) {
                //         var arr = [];
                //         arr.push(res.data.data[i]);
                //         data[res.data.data[i].from_type] = arr;
                //     }else {
                //         data[res.data.data[i].from_type].push(res.data.data[i])
                //     }
                // }
                that.timeline = res.data.data;

                $(document).ready(function () {
                    $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
                });
            })
        },
        watch: {
            hui_speak(newValue) {
                var that = this
                if(newValue.type == 'newMsg'){
                    var hui_html = newValue.data.msg;
                    var created_at=  newValue.data.created_at
                    var form_id =  newValue.data.from_id
                        axios({
                            url: 'https://wb.renqidaren.com/api/v1/customer_service/getadmin',
                            method: 'get',
                            headers: {
                                'Authorization': 'Bearer ' + that.token
                            },
                            params: form_id,
                        }).then(res=>{
                            $(".chatBox-content-demo").append(
                                `
                                 <div class="clearfloat">
                                    <div class="author-name">
                                    <small class="chat-date">${created_at}</small>
                                </div>
                                <p class="anminName">${res.data.data.administrator_name}</p>
                                <div class="left">
                                    <div class="chat-avatars"><img src="" alt="头像"></div>
                                    <div class="chat-message">
                                        ${hui_html}
                                    </div>
                                    </div>
                                </div>
                                `
                            )
                            $(document).ready(function () {
                                $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
                            });
                        })
                }
            }

        },
    }

</script>

<style lang="css">
    @import "../../style/chat.css";
    @import "../../style/iconfont.css";
</style>
